<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子组件获取父组件的数据</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            var vm1 = new Vue({
                el: '#mydiv',
                //1.组件嵌套定义
                components: {
                    'fathercom': {
                        template: '#mytemp1',
                        data: function () {
                            return {
                                foods: [
                                    {
                                        "id": "f001",
                                        "name": "旭伟蟹肉墨鱼滑",
                                        "way": "将冰鲜墨鱼筒，经破碎、搅拌等工艺，再配以秘制调料，嵌入鲜毛蟹中。锅开后再煮4分钟左右即可食用。配上丸滑蘸碟，风味更突出。",
                                        "image": "https://new-portal-web.oss-cn-beijing.aliyuncs.com/uploads/1-CE7I8970_旭伟蟹肉墨鱼滑.jpg"
                                    },
                                    {
                                        "id": "f002",
                                        "name": "草鱼片",
                                        "way": "选鲜活草鱼，切出鱼片冷鲜保存。锅开后再煮1分钟左右即可食用。",
                                        "image": "https://new-portal-web.oss-cn-beijing.aliyuncs.com/uploads/CE7I9470_鲜鱼片.jpg"
                                    },
                                    {
                                        "id": "f003",
                                        "name": "冻虾",
                                        "way": "将活虾冷冻而成。肉质脆嫩，锅开后再煮4分钟左右即可食用。",
                                        "image": "https://new-portal-web.oss-cn-beijing.aliyuncs.com/uploads/CE7I7004_冻虾.jpg"
                                    }
                                ]
                            }
                        },
                        components: {
                            'soncom': {
                                template: '#mytemp2',
                                //1.定义一个接受父组件数据的属性，字符串方式
                                props:['sonfoods']
                            }
                        }
                    },
                }
            })
        })
    </script>
</head>

<body>
    <template id="mytemp1">
        <div>
            <h2>我是父组件A</h2>
            <p>下面出现的是我的子组件</p>
            <!-- 2.父子组件的数据进行绑定，子组件的名称必须和props保持一致 -->
            <soncom :sonfoods="foods"></soncom>
        </div>
    </template>
    <template id="mytemp2">
        <div>
            <h2>我是子组件B</h2>
            <ul>
                <!-- 3.直接使用props的属性数据 -->
                <li v-for="item in sonfoods">
                    <img :src="item.image" alt="">
                </li>
            </ul>
        </div>
    </template>
    <div id="mydiv">
        <h1>hello</h1>
        <fathercom></fathercom>
        <button>修改的按钮</button>
    </div>
</body>

</html>